<template>
    <el-row class="download-wrap">
        <el-row class="title">
            <h3>资料下载</h3>
        </el-row>
        <el-row>
            <el-table :data="tableData">
                <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
                <el-table-column prop="name" label="名称" width="180" align="center"></el-table-column>
                <el-table-column label="下载地址" align="center">
                    <template slot-scope="scope">
                        <a :href="UPLOADURL + '/operation/' + scope.row.url" target="_blank" :title="scope.row.name" class="download-url">{{UPLOADURL + '/operation/' + scope.row.url}}</a>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80" align="center">
                    <template slot-scope="scope">
                    	<a :download="scope.row.name" :href="UPLOADURL + '/operation/' + scope.row.url" :title="scope.row.name" class="download-url">下载</a>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </el-row>
</template>
<script>
    import {getUploadFiles} from '@/api/api'
export default {
    data: function() {
        return {
        	tableData: []
        }
    },
    created: function () {
	    getUploadFiles().then(res => {
		    console.log(res.data);
        	this.tableData = res.data;
        })
    }
}
</script>
<style scoped lang="scss">
    .download-wrap {
        .title {
            font-size: 12px;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 5px;
            h3 {
                display: inline-block;
                padding: 5px 0;
                margin: 0;
                font-weight: normal;
                color: #23b7e5;
                border-bottom: 1px solid #23b7e5;
            }
        }
        .download-url{
            text-decoration: none;
            color: #20a0ff;
        }
    }
</style>